<template>
  <div class="said">
    <div class="top1111">
      <img @click="previous" src="../assets/总图标包含整个系统的/fanhui.png" />
      <span>评分</span>
      <span></span>
    </div>
    <div class="top">
      <img src="../assets/图标/订单信息-服务评价.png" alt="" />
      <p>订单信息</p>
    </div>
    <div class="tow">
      <p><span>商品</span>{{ prodName }}</p>
      <p><span>发货时间</span>{{ order }}</p>
      <p><span>到达时间</span>{{ sendTime }}</p>
    </div>
    <div class="top">
      <img src="../assets/图标/订单信息-服务评价.png" alt="" />
      <p>服务评价</p>
    </div>
    <div class="fuwu">
      <p>描述相符</p>
      <van-rate
        v-model="value1"
        size="28px"
        allow-half
        color="#ffcf60"
        void-icon="star"
        void-color="#dcdcdc"
      />
      <span>{{ value1 * 2 }}分</span>
    </div>
    <div class="fuwu">
      <p>物流速度</p>
      <van-rate
        v-model="value2"
        size="28px"
        allow-half
        color="#ff8d5b"
        void-icon="star"
        void-color="#dcdcdc"
      />
      <span>{{ value2 * 2 }}分</span>
    </div>
    <div class="fuwu">
      <p>服务质量</p>
      <van-rate
        v-model="value3"
        size="28px"
        color="#ff5d5e"
        allow-half
        void-icon="star"
        void-color="#dcdcdc"
      />
      <span>{{ value3 * 2 }}分</span>
    </div>
    <textarea placeholder="好 很好 非常好!!!!" v-model="txtxxx"></textarea>
    <div class="btnbom">
      <van-button type="primary" color="#003399" block @click="click"
        >提交评论</van-button
      >
    </div>
  </div>
</template>
 
<script>
import Vue from "vue";
import { Toast } from "vant";

Vue.use(Toast);
import { GetPingXList, GetSubemItsList } from "../request/aip";
export default {
  data() {
    return {
      value1: 5,
      value2: 3,
      value3: 2,
      value4: "",
      order: "",
      prodName: "",
      sendTime: "",
      code: "",
      txtxxx: "",
    };
  },
  created() {
    // console.log(this.$route.params);
    // console.log(this.$route.params.item.status);
    let arr = this.$route.params.item.status;

    this.order = this.$route.params.item.orderTime;
    this.prodName = this.$route.params.item.prodName;
    this.sendTime = this.$route.params.item.sendTime;
    this.code = this.$route.params.item.serialNo;
    if (arr == 30) {
      GetPingXList({
        serialNo: this.$route.params.item.serialNo,
      }).then((res) => {
        // console.log(res);
      });
    }
  },
  methods: {
    previous() {
      this.$router.go(-1);
    },
    click() {
      let arr = this.$route.params.item.status;
      if (arr == 30) {
        Toast("已评论过了");
        return;
      }
      // console.log(this.serialNo);
      GetSubemItsList({
        serialNo: this.code,
        prodConformityPoint: this.value1,
        logisticsSpeedPoint: this.value2,
        serviceQualityPoint: this.value3,
        comment: this.txtxxx,
      }).then((res) => {
        console.log(res);
        Toast("提交成功正在跳转首页");
        setTimeout(() => {
          this.$router.push("about");
        }, 1000);
      });
    },
  },
};
</script>
 
<style lang = "less" scoped>
.said {
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
  box-sizing: border-box;
}
.top {
  display: flex;
  background-color: #f5fafe;
  padding: 10px;
  box-sizing: border-box;

  img {
    width: 20px;
    margin-right: 0.5em;
  }
  p {
    color: #2d4ca6;
  }
}
.tow {
  background-color: #fff;
  padding: 10px;
  margin-bottom: 10px;
  box-sizing: border-box;

  p {
    margin-top: 3px;
    color: #737373;
    span {
      display: inline-block;
      width: 20vw;
      color: #7a7a7a;
      font-size: 14px;
    }
  }
}
.fuwu {
  display: flex;
  align-items: center;
  padding: 20px;
  background-color: #fff;
  box-sizing: border-box;

  p {
    margin-right: 40px;
  }
  .van-rate {
    margin-right: 30px;
  }
  span {
    color: #b4b4b4;
  }
}
textarea {
  margin-top: 30px;
  width: 100%;
  height: 20%;
  border: none;
  padding: 20px;
  box-sizing: border-box;
  resize: none;
}
.btnbom {
  padding: 10px;
  background-color: #fff;
  margin-top: 20px;
  .van-button {
    border-radius: 30px;
  }
}
.top1111 {
  display: flex;
  background-color: #003399;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 10px 10px;
  span {
    color: #fff;
    font-size: 16px;
  }
  img {
    width: 10px;
    height: 20px;
  }
}
</style>